﻿body, header, div, img, a, form, label, input, button, nav, ul, li, section, article, h1, p, time, aside, h2, footer
{
    padding: 0;
    margin: 0;
}

@text-color: white;
@text-font: serif;
@bg-color-light: #D392FE;
@bg-color: #8F1AEF;

.clearfix
{
    zoom: 1;

    &:after
    {
        content: "";
        height: 0;
        clear: both;
        display: block;
    }
}

.linear-gradient(@from-color, @from-pos, @to-color, @to-pos)
{
    background: @from-color; /* Old browsers */
    background: -moz-linear-gradient(top,  @from-color @from-pos, @to-color @to-pos); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@from-pos,@from-color), color-stop(@to-pos,@to-color)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  @from-color @from-pos,@to-color @to-pos); /* IE10+ */
    background: linear-gradient(to bottom,  @from-color @from-pos,@to-color @to-pos); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{from-color}', endColorstr='@{to-color}',GradientType=0 ); /* IE6-9 */
}

.general-link
{
    text-decoration: none;
    color: @text-color;
    font-family: @text-font;
    &:hover
    {
        text-decoration: underline;
        color: darken(@text-color, 25%);
    }
}

.text-link
{
    text-decoration: none;
    color: darken(@text-color, 20%);
    font-family: @text-font;
}

.common-radius
{
    border-radius: 12px 12px;
}

body {
    background-color: @bg-color;

    > header
    {
        .linear-gradient(@bg-color-light, 0%, @bg-color, 100%);
        color: @text-color;
        font-family: @text-font;
        padding-top: 30px;
        #logo-container
        {
            float: left;
            padding-left: 13px;
            img
            {
                height: 100px;
                width: 325px;
            }
        }
        #reg-form-container
        {
            float: right;
            padding-right: 80px;
            label
            {
                display: inline-block;
                width: 80px;
                margin: 2px;
            }
            input
            {
                .common-radius;
                margin: 2px;
                border: 1px solid darken(@bg-color-light, 40%);
                background: darken(@bg-color-light, 15%);
                padding-left: 6px;
                padding-right: 6px;
             }
             button
             {
                .common-radius;
                width: 80px;
                height: 30px;
                margin: 2px;
                background: darken(@bg-color-light, 15%); 
                color: @text-color;
                font-weight: bold;
                padding: 5px;
                border: 1px outset #603382;
                &:hover
                {
                    border-style: inset;
                }
             }
        }

        #header-container
        {
            .clearfix;
        }

        nav
        {
            margin: 20px;
            width: 80%;
            border: 1px solid black;
            .common-radius;
            color: @text-color;
            font-family: @text-font;
            #main-nav-list
            {
                position: relative;
                list-style-type: none;
                > li
                {
                    display: inline-block;
                    > ul
                    {
                        display: none;
                    }
                    &:hover
                    {
                        > ul
                        {
                            background: lighten(@bg-color, 10%);
                            opacity: 0.9;
                            .common-radius;
                            list-style-type: none;
                            display: inline-block;
                            position: absolute;
                            top: 40px;
                            left: 60px;
                            > li
                            {
                                margin-left: 5px;
                                margin-right: 5px;
                                border-bottom: 1px solid black;
                            }
                        }
                    }
                }
                li
                {
                    padding: 12px;
                    a
                    {
                        .general-link;
                    }
                }
            }
        }
    }
    
    section
    {
        float: left;
        width: 75%;
        color: @text-color;
        font-family: @text-font;
        article
        {
            margin: 20px;
            padding: 12px;
            border: 1px solid black;
            .common-radius;
            header
            {
                padding: 5px;
            }
            > footer 
            {
                text-align: right;
                a
                {
                    .text-link;
                }
            }
        }
    }
    aside
    {
        margin-top: 20px;
        float: left;
        width: 20%;
        color: @text-color;
        font-family: @text-font;
        > ul
        {
            > li
            {
                padding: 12px;
                border: 1px solid black;
                .common-radius;
                h2
                {
                    margin-bottom: 8px;
                }
                > ul
                {
                    padding-left: 10px;
                    >li 
                    {
                        padding-left: 30px;
                        background: url('images/li-dot.png') no-repeat left center;
                    }
                }
            }
        }
        ul
        {
            list-style-type: none;
        }
        a
        {
            .text-link;
        }
        strong, em
        {
            font-style: normal;
            color: darken(@text-color, 15%);
        }
    }
    > footer 
    {
        clear: both;
        color: @text-color;
        font-family: @text-font;
        text-align: center;
        margin-bottom: 30px;
    }
}
